<template>
  <BackHeader :title="lang.page_title" />
  <div class="app_center activity-page">
    <!-- logo -->
    <div class="content-logo">
      <NuxtImg src="/images/activity/days-cards/sevenDay_1.png" />
    </div>
    <ListItem
      v-for="item in listData"
      :key="item.id"
      :dataInfo="item"
      @changeDepDialog="changeDepDialog"
    />
    <Desc />
  </div>
  <DepDialog
    :show="showDepDialog"
    :formData="payFormData"
    @close="changeDepDialog(false)"
  />
</template>

<script setup lang="ts">
import ListItem from "./components/ListItem.vue";
import Desc from "./components/Desc.vue";
import DepDialog from "@/components/Carteira/components/DepDialog.vue";

const lang: any = getCurrentPageLang("activity/days-cards");

const showDepDialog = ref(false);
const payFormData = ref({ payNum: 10 });
function changeDepDialog(val: boolean, num?: number) {
  payFormData.value.payNum = num || 10;
  showDepDialog.value = val;
}

const listData = ref([
  {
    id: 1,
    opened: true,
    icon: "/images/activity/days-cards/sevenDay_2.png",
    data_1: 50,
    data_2: 65,
    list: [
      { day: 1, amount: "5,00", bar: "3 X" },
      { day: 2, amount: "10,00", bar: "3 X" },
      { day: 3, amount: "15,00", bar: "3 X" },
      { day: 4, amount: "20,00", bar: "3 X" },
      { day: 5, amount: "25,00", bar: "3 X" },
      { day: 6, amount: "30,00", bar: "3 X" },
      { day: 7, amount: "35,00", bar: "3 X" },
    ],
  },
  {
    id: 2,
    opened: false,
    icon: "/images/activity/days-cards/sevenDay_3.png",
    data_1: 100,
    data_2: 115,
    list: [
      { day: 1, amount: "5,00", bar: "3 X" },
      { day: 2, amount: "10,00", bar: "3 X" },
      { day: 3, amount: "15,00", bar: "3 X" },
      { day: 4, amount: "20,00", bar: "3 X" },
      { day: 5, amount: "25,00", bar: "3 X" },
      { day: 6, amount: "30,00", bar: "3 X" },
      { day: 7, amount: "35,00", bar: "3 X" },
    ],
  },
  {
    id: 3,
    opened: false,
    icon: "/images/activity/days-cards/sevenDay_4.png",
    data_1: 300,
    data_2: 350,
    list: [
      { day: 1, amount: "5,00", bar: "3 X" },
      { day: 2, amount: "10,00", bar: "3 X" },
      { day: 3, amount: "15,00", bar: "3 X" },
      { day: 4, amount: "20,00", bar: "3 X" },
      { day: 5, amount: "25,00", bar: "3 X" },
      { day: 6, amount: "30,00", bar: "3 X" },
      { day: 7, amount: "35,00", bar: "3 X" },
    ],
  },
]);
</script>

<style scoped lang="scss">
.content-logo {
  img {
    height: 3rem;
    width: 100%;
  }
}
</style>
